<template>
    <div>
        <div class="query-model">
            <div>查询模式选择</div>
            <ul class="model-list">
                <li
                    v-for="item in stationMangeItems"
                    :class="{ active: item.id === queryModel }"
                    @click="handleclickModel(item.id)"
                >
                    <i :class="['iconfont', item.icon, 'icon']"></i>

                    <span class="icon-title">{{ item.title }}</span>
                </li>
            </ul>
        </div>
        <RoutePlan v-if="routeDesign" />
        <!-- 图例 -->
        <div class="legend">
            <div class="legend-title">
                <span>图标</span> <span>站控措施</span>
            </div>
            <ul class="legend-list">
                <li v-for="item in station_solutions">
                    <i :class="['iconfont', item.iconName, 'icon']"></i>
                    <span class="icon-title">{{ item.title }}</span>
                </li>
            </ul>
        </div>
        <LinePanel />
    </div>
</template>

<script setup>
import { stationMangeItems, station_solutions } from "@/store/staticData";
import { onMounted, ref } from "vue";
import {
    renderHeat,
    displayAll,
} from "../../cesiumTools/LineMaterial/effectController";
import { useLineData, watchLineData, useMeasureData } from "@/store/index";
import RoutePlan from "./RoutePlan.vue";
import LinePanel from "@/components/LinePanel.vue";

const lineDataStore = useLineData();
const viewer = lineDataStore.viewer;
const measureDataStore = useMeasureData();

const queryModel = ref(stationMangeItems[0].id);

const routeDesign = ref(false);
function handleclickModel(id) {
    queryModel.value = id;
    removeHeat && removeHeat();
    routeDesign.value = false;
    //显示所有要素
    displayAll(viewer, true);
    //关闭站控措施
    measureDataStore.setData([]);
    if (id === "lineCrowd") {
        renderHeatMap();
    } else if (id === "pathDesign") {
        routeDesign.value = true;
        //关闭所有原有要素
        displayAll(viewer, false);
    } else if (id === "stationControl") {
        renderStationMeasure();
    }
}

let removeHeat;

const renderHeatMap = async () => {
    // let lineData = await getLine();

    let lineData = await watchLineData("setData");
    //这里使用watchLineData为什么拿不到,linedata只会设置一次，在之后进行$onAction时，不会执行，promise一直处于pending状态
    let dataSource = [];
    lineData.forEach((element) => {
        const { stationsList } = element;
        stationsList.forEach((item) => {
            const { lng, lat } = item.position;
            dataSource.push({
                x: lng,
                y: lat,
                value: Math.ceil(Math.random() * 1000),
            });
        });
    });
    removeHeat = renderHeat(viewer, dataSource);
};

onMounted(async () => {});

// 渲染站控措施
const renderStationMeasure = () => {
    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    }
    // 从数组中随机取几个数
    const getRandomArrayValue = (arr, num) => {
        var sData = arr.slice(0),
            i = arr.length,
            min = i - num,
            item,
            index;
        while (i-- > min) {
            index = Math.floor((i + 1) * Math.random());
            item = sData[index];
            sData[index] = sData[i];
            sData[i] = item;
        }
        return sData.slice(min);
    };

    const resultData = [];
    lineDataStore.allData.forEach((item) => {
        const { stationsList, color } = item;
        const result = stationsList.map((s) => {
            // 0-5个站控措施
            const measureNum = getRandomIntInclusive(0, 5);
            let measures = getRandomArrayValue(station_solutions, measureNum);
            s.measures = measures;
            s.color = color;
            return {
                name: s.name,
                measures,
            };
        });
        resultData.push(result);
    });
    // 全局共享站控措施数据
    measureDataStore.setData(resultData);
};
</script>

<style scoped>
.query-model {
    position: absolute;
    top: 100px;
    left: 100px;
    height: 300px;
    width: 200px;
    z-index: 999;
    color: #ffffff;
    opacity: 0;
    animation: show 1.5s ease-in-out forwards;
}
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.legend {
    position: absolute;
    top: 50px;
    right: 10px;
    opacity: 0;
    animation: show 1.5s ease-in-out forwards;
}
.legend-title {
    color: #ffffff;
}
/* 第一个span */
.legend-title span:first-child {
    margin-right: 30px;
    margin-left: 20px;
}

.model-list,
.legend-list {
    position: relative;
    margin: 20px 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
    list-style: none;
}
.legend-list{
    gap:5px;
}
/* 一条线中上到下，箭头 */
.model-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 65px;
    width: 2px;
    height: 120%;
    background-color: #93a3ab;
}

.model-list li,
.legend-list li {
    display: flex;
    align-items: center;
    user-select: none;
}
i.icon {
    line-height: 24px;
    color: #fffffff0;
    display: block;
    width: 30px;
    height: 24px;
    background-image: url("@/assets/uiResources/icon-wrapper.png");
    background-size: 100% 100%;
    line-height: 24px;
    text-align: center;
}

li.active i.icon {
    background-image: url("@/assets/uiResources/icon-wrapper-active.png");
}
span.icon-title {
    position: relative;
    margin-left: 30px;
    background-image: url("@/assets/uiResources/button.png");
    background-size: 100% 100%;
    padding: 5px 10px;
    color: #fffffff0;
    cursor: pointer;
}
li.active span.icon-title {
    background-image: url("@/assets/uiResources/button-active.png");
}
span:hover.icon-title {
    background-image: url("@/assets/uiResources/button-active.png");
}
/* 一条线从左边连接 */
.model-list li span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    width: 15px;
    height: 2px;
    background-color: #93a3ab;
}
.legend-list li span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    width: 30px;
    height: 2px;
    background-color: #93a3ab;
}
</style>
